<template>
  <div class="select-container relative vertical-align-flex cursor">
    <input type="text" class="select-blur input-none" readonly ref="blur"
    @click.stop="dropStatus=='show'?dropStatus='hide':dropStatus='show'" @blur="blur">
    <div class="selected-value">{{collection[value]}}</div>
    <img :src="require('@/assets/images/arrow-down.png')" :class="{
      'select-arrow': true,
      'select-focus': dropStatus=='show',
    }" alt="">
    <drop :list="collection" :show="dropStatus=='show'" @entryClick="change"></drop>
  </div>
</template>

<script>
import drop from "./drop.vue"
export default {
  components: {
    drop,
  },
  data() {
    return {
      dropStatus: "hide",
      current: "",
    }
  },
  props: {
    collection: {default: [1, 2, 3, 4, 5]},
    value: {},
  },
  methods: {
    change(index) {
      console.log(index)
      if(index!==this.current) {
        this.$emit('input', index)
        this.$emit('change', index)
        this.current = index
      }
      this.$emit('confirm', index)
    },
    blur() {
      setTimeout(()=> {
        this.dropStatus='hide'
      }, 200)
    }
  },
  created() {
    this.current = this.value
  }
}
</script>

<style lang="scss" scoped>
.select-container {
  width: 280px;
  height: 50px;
  border-radius: 10px;
  padding: 0 15px;
  background-color: $f;
}
.select-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: transparent;
  border: 1px solid #DCDFE6;
  &:hover {
    cursor: pointer;
    cursor: hand;
    border-color: rgb(192, 196, 204);
  }
  // focus blur active
  &:focus {
    border-color: #409EFF;
  }
}
.selected-value {
  flex: 1;
  line-height: 1.4;
}
.select-arrow {
  width: 10px;
  transition: transform .5s ease;
}
.select-focus {
  transform: rotate(-180deg);
}
</style>
